<template>
    <div class="CJ">
        <div class="main">
            <div class="activityTheme" v-html="activityContent"></div>
            <div class="activityDraw">
                <!-- 抽奖 -->
                <div class="box">
                    <LuckyWheel
                        ref="myLucky"
                        width="274px"
                        height="274px"
                        :prizes="prizes"
                        :blocks="blocks"
                        :buttons="buttons"
                        :default-config="defaultConfig"
                        @start="startCallback"
                        @end="endCallback"
                    />
                </div>
                <!-- 中奖信息 -->
                <div class="right_message">
                    <div class="activityruleS">· 中奖信息 ·</div>
                    <div class="marquees">
                        <vue-seamless-scroll :data="msglist" :class-option="optionHover">
                            <ul class="item">
                                <li v-for="(item, index) in msglist" :key="index">
                                    <span class="title" v-html="item"></span>
                                </li>
                            </ul>
                        </vue-seamless-scroll>
                    </div>
                </div>
                <!-- 个人资料 -->
                <div class="user">
                    <p v-if="user_mes.user">
                        玩家账号：
                        <span>{{ user_mes.user.userName }}</span>
                        <span class="logout" @click="logout()">退出></span>
                    </p>
                    <p v-else class="player login_account" @click="login_account()">
                        玩家账号：
                        <span>未登录</span>
                    </p>
                    <p>
                        剩余抽奖：
                        <span>{{ paylist.drawNum || 0 }}</span>
                        <span class="logout">次</span>
                    </p>
                    <p>
                        累计充值：
                        <span>{{ paylist.payMoney || 0 }}</span>
                        <span class="logout" @click="reload()" v-show="user_mes.user">刷新></span>
                    </p>
                    <span class="qcz" @click="lottery_login()"></span>
                </div>
                <!-- 活动规则 -->
                <div class="rule flex">
                    <div class="rule_box">
                        <p class="p1">累计充值</p>
                        <div v-for="(item, index) in ruleslist" :key="index">{{ item.pay }}</div>
                    </div>
                    <div class="rule_box">
                        <p class="p2">抽奖次数</p>
                        <div v-for="(item, index) in ruleslist" :key="index">{{ item.num }}</div>
                    </div>
                </div>
            </div>
        </div>
        <el-dialog :visible.sync="dialogVisible" width="495px" :append-to-body="true" class="dialogVisible">
            <div style="border: 1.5px solid #b4875c">
                <img src="@/assets/ChoJiang/huojiangtanchuang.png" class="img" />
                <div class="close" @click="dialogVisible = false"></div>
                <!-- <p class="zhongjiang">中奖产品为: {{ ZJmoney }}</p> -->
                <div class="zhongjiang">
                    <p>恭喜您获得</p>
                    <p class="mon">PK币×{{ ZJmoney }}</p>
                    <span class="guanbi" @click="dialogVisible = false"></span>
                </div>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import { mapState } from 'vuex';
import { logouts, drawUserNUMS, drawUsermoneys, drawUserrules, MembershipMultipliers } from '@/api/url';
export default {
  props: {},
  created () {
    if (this.user_mes && this.user_mes.user) {
      this.drawUserNUMS()
    }
    this.drawUserrules()

  },
  data () {
    return {
      dialogVisible: false,
      select: 1, //页面对应抽奖下标
      timer: '',
      count: 0,
      msglist: [],
      ruleslist: [],
      information: '', //活动数据
      paylist: '', //获取抽奖数据
      ZJmoney: '', //中奖金额
      activityContent: '',//活动内容
      //转盘背景
      blocks: [{ padding: '0px', background: '#F3B97D' }],
      // 转盘奖品
      prizes: [],
      //转盘抽奖按钮
      buttons: [{
        radius: '35%',
        pointer: false,
        imgs: [{
          src: require('@/assets/TurnplateChoJiang/LotteryBtn.png'),
          width: '100%',
          top: '-130%',
          left: '5.6%'
        }]
      }],
      defaultConfig: { gutter: '1px' }, //转盘间隙
      multiple: null,
      boxName: ""
    };
  },
  mounted () {
    this.$EventBus.$once('boxName', data => {
      this.boxName = data
      this.MembershipMultipliers()
    })
    var WZname = window.localStorage.getItem('title').split('盒子');
    var code = '';
    var that = this;
    // var suiji = '';
    var rnd = '';
    // var codeLength = 4; //验证码的长度，可以根据个人需求改变
    if (that.multiple == 1) {
      var codeLength = 3; //验证码的长度，可以根据个人需求改变
    } else {
      var codeLength = 4; //验证码的长度，可以根据个人需求改变
    }
    var random = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
    // 随机数PK币
    function getRandomNumberByRange () {
      // rnd = parseInt(Math.random() * (2500 + 1 - 100) + 100);
      if (that.multiple == 1) {
        rnd = parseInt(Math.random() * (150 + 1 - 20) + 20);
      } else {
        rnd = parseInt(Math.random() * (1500 + 1 - 100) + 100);
      }
    }
    //生成
    function ASD () {
      for (var i = 0; i < codeLength; i++) {
        //循环遍历codeLength，值是几，就循环几次
        var index = Math.floor(Math.random() * 10); //Math.floor方法用于返回小于或等于一个给定数字的最大整数；Math.random方法返回 0（含）和 1（不含）之间的随机数
        code += random[index]; //根据索引取得随机数加到code上
        if (code.length == 4) {
          that.msglist.push('恭喜玩家' + WZname[0] + '' + code + '**获得了 ' + rnd + 'PK币');
          code = '';
          rnd = '';
        }
      }
    }
    for (let i = 0; i < 50; i++) {
      getRandomNumberByRange();
      ASD();
    }
  },
  methods: {
    // 去充值
    lottery_login () {
      if (this.user_mes && this.user_mes.user) {
        this.$EventBus.$emit('open_VoucherCenterdialogVisible', true)//!打开充值弹窗
      } else {
        this.$EventBus.$emit('ishow_loginDialog', true);//!打开登录弹窗
      }
    },
    // 玩家账号是否登录
    login_account () {
      this.$EventBus.$emit('ishow_loginDialog', true); //!打开登录弹窗
    },
    // 点击抽奖按钮会触发star回调
    startCallback () {
      // 调用抽奖组件的play方法开始游戏
      if (this.user_mes && this.user_mes.user) {
        if (this.paylist.drawNum !== 0) {
          this.paylist.drawNum = this.paylist.drawNum - 1
          this.drawUsermoneys()
          this.$refs.myLucky.play()
        } else {
          this.$message({ message: '暂无抽奖次数,请充值', type: 'warning', center: true });
        }
      } else {
        this.$EventBus.$emit('ishow_loginDialog', true)//!打开登录弹窗
      }
      // 模拟调用接口异步抽奖
      setTimeout(() => {
        // 假设后端返回的中奖索引是0
        const index = this.paylist.draw.num - 1
        // 调用stop停止旋转并传递中奖索引
        this.$refs.myLucky.stop(index)
      }, 3000)
    },
    // 抽奖结束会触发end回调
    endCallback (prize) {
      this.drawUserNUMS()
      this.dialogVisible = true;
    },
    // 获取当前抽奖次数
    async drawUserNUMS () {
      const res = await drawUserNUMS();
      if (res.data.code === 200) {
        this.paylist = res.data;
      }
    },
    // 获取抽奖规则
    async drawUserrules () {
      const res = await drawUserrules();
      if (res.data.code === 200) {
        this.ruleslist = res.data.data;
        // this.multiple = Number(res.data.magnification);
        this.activityContent = res.data.activity
        const prizes = []
        if (res.data.data) {
          res.data.data.forEach((item) => {
            prizes.push({
              background: '#fcefd3',
              // fonts: [{ text: item.coinMin === item.coinMax ? item.coinMin : item.coinMin + '-' + item.coinMax, top: '10%', fontSize: '12px', fontColor: '#7B2600' }],
              imgs: [{ src: require(`@/assets/TurnplateChoJiang/${item.num}.png`), width: '50px', height: '50px', top: '10px' }],
            })
          })
        }
        this.prizes = prizes
      }
    },
    //抽奖金额
    async drawUsermoneys () {
      const res = await drawUsermoneys();
      if (res.data.code === 200) {
        // console.log(res);
        this.ZJmoney = res.data.money;
      }
    },
    // 退出登录
    async logout () {
      try {
        this.$confirm('确定要退出吗?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
          .then(async () => {
            const res = await logouts();
            // console.log(res);
            if (res.data.code === 200) {
              this.paylist = '';
              this.$message({ message: res.data.msg, type: 'success', center: true });
              this.$store.commit('setUser', {}); // 把本地的token清空
              this.$store.commit('user_xx', {}); // 把本地的token清空
              window.localStorage.removeItem('token'); // 把本地的token清空
              this.$EventBus.$emit('close_user', false);//!隐藏用户首页信息
            }
          })
          .catch();
      } catch (error) {
        console.log(error);
      }
    },
    // 刷新
    reload () {
      this.$EventBus.$emit('callTopGetInfos', 1); //!调用首页的gitInfo方法
      this.drawUserNUMS();
      setTimeout(() => {
        this.$message({ message: '刷新成功!', type: 'success', center: true });
      }, 1000);
    },
    // 是否请求抽奖次数
    user_login () {
      if (this.user_mes && this.user_mes.user) {
        this.drawUserNUMS();
      }
    },
    //获取会员倍率
    async MembershipMultipliers () {
      const res = await MembershipMultipliers()
      if (res.data.code == 200) {
        this.multiple = Number(res.data.magnification);
        window.localStorage.setItem(this.boxName + 'MembershipMultipliers', this.multiple) //把倍率存到本地
      }
    }
  },
  computed: {
    ...mapState(['user_mes', 'user']),
    optionHover () {
      return {
        hoverStop: false, //鼠标悬停关闭
        singleWidth: 0, // 单行停顿的宽度(默认值0是无缝不停止的滚动)
        singleHeight: 0, //单行停顿间距(不需要停顿不设置)
        waitTime: 0, //单行停顿时间(不需要停顿不设置)
        step: 0.8, //向上滚动不停顿
        limitMoveNum: 0, // 开始无缝滚动的数据量
        direction: 1, // 0向下 1向上 2向左 3向右
        openWatch: true // 开启数据实时监控刷新dom
      };
    }
  },
  components: {},
  watch: {
    user (oldval, newval) {
      setTimeout(() => {
        this.user_login();
      }, 1000);
    }
  },
  beforeDestroy () {
    this.$EventBus.$off('boxName')
  }
};
</script>

<style scoped lang="less">
/deep/ .el-dialog__header {
    display: none;
}
.CJ {
    .main {
        overflow-y: auto !important;
        height: 628px !important;
        background: url('@/assets/TurnplateChoJiang/bigbeijing.png');
        // 活动主题
        .activityTheme {
            width: 500px;
            margin: 0 auto;
            margin-top: 100px;
            color: #761b0a;
            font-size: 13px !important;
        }
        // 活动抽奖
        .activityDraw {
            position: relative;
            background: url('@/assets/TurnplateChoJiang/zhuanpan.png');
            width: 928px;
            height: 428px;
            margin-top: -10px;
            margin-left: 108px;
            // 转盘
            .box {
                position: absolute;
                top: 94px;
                left: 69px;
            }
            // 个人资料
            .user {
                position: absolute;
                top: 58px;
                left: 410px;
                width: 196px;
                p {
                    font-size: 12px;
                    font-family: Microsoft YaHei, Microsoft YaHei-Regular;
                    color: #dab276;
                    line-height: 28px;
                    span {
                        font-size: 14px;
                        font-family: Microsoft YaHei, Microsoft YaHei-Bold;
                        text-align: center;
                        color: #fff7e1;
                        line-height: 28px;
                        cursor: pointer;
                        &:hover {
                            color: #cbc2c2;
                        }
                    }
                    .logout {
                        margin-left: 10px;
                        font-size: 14px;
                        font-family: Microsoft YaHei, Microsoft YaHei-Regular;
                        color: #dab276;
                        line-height: 28px;
                        &:hover {
                            color: #fff7e1;
                        }
                    }
                }
                .qcz {
                    position: relative;
                    margin: 0 auto;
                    width: 135px;
                    height: 33px;
                    display: block;
                    background: url('@/assets/ChoJiang/qcz.png');
                    margin-top: 5px;
                    cursor: pointer;
                    &:hover:before {
                        content: '';
                        position: absolute;
                        top: 0;
                        left: 0;
                        width: 135px;
                        height: 33px;
                        background: url('@/assets/ChoJiang/qcz-1.png');
                    }
                }
            }
            // 中奖信息
            .right_message {
                position: absolute;
                width: 200px;
                top: 195px;
                left: 410px;
                .activityruleS {
                    font-size: 13px;
                    font-family: Microsoft YaHei, Microsoft YaHei-Regular;
                    font-weight: 400;
                    text-align: center;
                    color: #ffdfa1;
                    line-height: 32px;
                    letter-spacing: 0.44px;
                }
                .marquees {
                    height: 168px;
                    font-size: 12px;
                    transform: scale(0.8333);
                    width: 250px;
                    font-family: Microsoft YaHei, Microsoft YaHei-Regular;
                    text-align: center;
                    color: #ffdfa1;
                    line-height: 20px;
                    letter-spacing: 0.32px;
                    margin: 0px auto;
                    margin-left: -18px;
                    overflow: hidden;
                    pointer-events: none;
                    ul li {
                        text-align: left;
                        white-space: nowrap;
                        overflow: hidden;
                        text-overflow: ellipsis;
                    }
                }
            }
            // 规则
            .rule {
                position: absolute;
                top: 70px;
                left: 722px;
                color: #ffdfa1;
                text-align: center;
                font-size: 12px;
                .rule_box {
                    .p1 {
                        width: 81px;
                    }
                    .p2 {
                        width: 81px;
                    }
                    div {
                        width: 81px;
                        border-bottom: 1px solid #a44b23;
                        padding-top: 10px;
                        padding-bottom: 5px;
                    }
                }
            }
        }
    }
    /deep/ .el-dialog__body {
        height: 650px !important;
        overflow-y: auto !important;
        padding: 0 !important;
    }
}
.dialogVisible {
    /deep/ .el-dialog__body {
        height: 0px !important;
        padding: 0 !important;
    }
}
.close {
    position: absolute;
    top: -15px;
    right: -15px;
    width: 30px;
    height: 30px;
    background-image: url('@/assets/ChoJiang/close.png');
    cursor: pointer;
    &:hover {
        background-image: url('@/assets/ChoJiang/close2.png');
    }
}
.zhongjiang {
    width: 100%;
    position: absolute;
    top: 72px;
    text-align: center;
    p {
        font-size: 16px;
        font-family: Microsoft YaHei, Microsoft YaHei-Regular;
        color: #ffdc7a;
        line-height: 28px;
        letter-spacing: 0.8px;
    }
    .mon {
        margin-top: 5px;
        font-size: 22px;
        font-family: FZLanTingHei-DB-GBK, FZLanTingHei-DB-GBK-Regular;
        color: #ffeab1;
        line-height: 28px;
        letter-spacing: 1.1px;
    }
    .guanbi {
        position: relative;
        margin: 50px auto;
        display: block;
        width: 183px;
        height: 45px;
        background: url('@/assets/ChoJiang/guanbi.png');
        &:hover:before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 183px;
            height: 45px;
            background: url('@/assets/ChoJiang/guanbi-1.png');
        }
    }
}
</style>
